<template>
    <Form ref="form" :model="data" :label-position="labelPosition">
        <Row :gutter="24" type="flex">
            <Col span="5">
                <FormItem>
                    <DatePicker type="date" :start-date="startDate" v-width="'100%'" v-model="data.date" placeholder="请选择治疗日期" clearable @on-change="onSearchItem"/>
                </FormItem>
            </Col>
            <Col span="6">
<!--       @on-blur="onSearchItems"         -->
                <Input v-model="data.name" placeholder="请输入患者姓名/诊疗号" element-id="name" clearable @on-enter="onSearchItems"  @on-clear="onSearchItem"/>
            </Col>
           <Col span="6">
               <!-- <FormItem label="诊室" prop="personnel" label-for="personnel"> -->
                   <Select v-model="data.room" placeholder="诊室" :max-tag-count="3" element-id="personnel" multiple clearable @on-change="onSearchItem" @on-clear="onSearchItem">
                       <Option v-for="(items, index) in rooms" :key="'room'+index" :value="items.value">{{items.label}}</Option>
                   </Select>
               <!-- </FormItem> -->
           </Col>
            <Button style="margin-left: auto; margin-right: 12px" type="primary" @click="editText">录入治疗</Button>
<!--            <Col v-bind="grid">-->
<!--                <FormItem label="治疗项目" prop="disease" label-for="disease">-->
<!--                    <Select v-model="data.project" placeholder="治疗项目" element-id="diagnosis" clearable @on-change="onSearchItem" @on-clear="onSearchItem">-->
<!--                        <Option v-for="(items, index) in projects" :key="'project'+index" :value="items.value">{{items.title}}</Option>-->
<!--                    </Select>-->
<!--                </FormItem>-->
<!--            </Col>-->
        </Row>
    </Form>
</template>
<script>
    import { mapState } from 'vuex'
    export default {
        data () {
            return {
                startDate: new Date(),
                model12: [],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                collapse: false,
                data: {
                    name: '',
                    date: new Date(),
                    room: [],
                    // project: ''
                }
            }
        },
        props: ['rooms', 'projects'],
        computed: {
            ...mapState('admin/layout', [
                'isMobile'
            ]),
            labelWidth () {
                return this.isMobile ? undefined : 80;
            },
            labelPosition () {
                return this.isMobile ? 'top' : 'right';
            }
        },
        methods: {
            onSearchItem () {
                this.data.name = ''
                this.$emit('search', this.data)
            },
            onSearchItems () {
                this.data.date = ''
                this.$emit('search', this.data)
            },
            editText () {
                this.$emit('editText')
            },
            treeChangeTime () {
                this.data.date = new Date()
            }
        }
    }
</script>
